<script setup lang="ts">
import Login from './Login.vue'
const userStore = useUserStore()
const loginRef = ref<InstanceType<typeof Login> | null>(null)
const handleLogin = () => {
  loginRef.value?.openModal(true)
}
</script>
<template>
  <div>
    <div v-if="!userStore.nickname" class="mr-5">
      <button type="button" @click="handleLogin">登录</button>
    </div>
    <div v-else class="flex items-center mr-5">
      {{ userStore.nickname }}
      <img
        src="https://image.baidu.com/search/detail?adpicid=0&b_applid=11719606550163727449&bdtype=0&commodity=&copyright=&cs=2990944520%2C2827958271&di=7518804108115968001&fr=click-pic&fromurl=http%253A%252F%252Fmbd.baidu.com%252Fnewspage%252Fdata%252Fdtlandingsuper%253Fnid%253Ddt_3531598681606388661&gsm=1e&hd=&height=0&hot=&ic=&ie=utf-8&imgformat=&imgratio=&imgspn=0&is=0%2C0&isImgSet=&latest=&lid=da4c40aa00e01d66&lm=&objurl=https%253A%252F%252Fiknow-pic.cdn.bcebos.com%252F83025aafa40f4bfba70c2fc9114f78f0f636184a&os=860268719%2C131482641&pd=image_content&pi=0&pn=11&rn=1&simid=4224914079%2C616524185&tn=baiduimagedetail&width=0&word=%E5%A4%B4%E5%83%8F%20%E5%AD%A6%E7%94%9F&z="
        alt=""
        class="w-[30px] h-[30px] rounded-full"
      />
    </div>
    <ClientOnly>
      <Login ref="loginRef" />
    </ClientOnly>
  </div>
</template>
<style scoped></style>
